<template>
  <div class="children">
    <!-- -----------------------------------------------------基本信息-------------------------------------------------------------- -->
    <el-divider>基本信息</el-divider>
    <div class="dialog_left">
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="验收标题">{{ form.acceptanceTitle || '-' }}</el-descriptions-item>
        <el-descriptions-item label="验收人">{{ form.newestResult && form.newestResult.accepterName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="验收时间">{{ form.newestResult && form.newestResult.acceptanceTime || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="验收类型">{{ form.newestResult && form.newestResult.acceptanceTypeName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="采购申请单">{{ form.purchaseTitle + '（' + form.purchaseNum + '）' || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ form.newestResult && form.newestResult.remark || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- -----------------------------------------------------附件信息-------------------------------------------------------------- -->
    <el-divider>附件信息</el-divider>
    <div class="dialog_accessory">
      <el-link style="margin-left:10px" :disabled="!item.file" v-for="item in form.results" :key="item.acceptanceId"
        type="primary" :href="item.file" target="_blank">
        <i class="el-icon-document"></i>
        <span>下载附件{{ handleSubstring(item.file) }}</span>
      </el-link>
    </div>
    <!-- -----------------------------------------------------设备信息-------------------------------------------------------------- -->
    <el-divider>设备信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="10" border>
        <el-descriptions-item label="设备编号">{{ form.equipmentNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ form.equipmentName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ form.brand || '-' }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ form.model || '-' }} </el-descriptions-item>
        <el-descriptions-item label="单位">{{ form.unitName || '-' }} </el-descriptions-item>
        <el-descriptions-item label="供应商">{{ form.supplierName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="申购日期">{{ form.purchaseTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="最新验收">{{ form.newestResult && form.newestResult.acceptanceTypeName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="验收时间">{{ form.newestResult && form.newestResult.acceptanceTime || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="验收意见">{{ form.newestResult && form.newestResult.view || '无' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- -----------------------------------------------------验收信息-------------------------------------------------------------- -->
    <!-- <div class="dialog_message" v-for="(item, index) in form.results" :key="item.acceptanceId">
      <el-descriptions :labelStyle="randomRgb(index)" direction="vertical" :column="4" border>
        <el-descriptions-item label="验收人">
          {{
          item.accepterName
          || '-'
          }}
        </el-descriptions-item>
        <el-descriptions-item label="验收时间">{{
          item.acceptanceTime || '-'
          }}</el-descriptions-item>
        <el-descriptions-item label="验收类型">{{
          item.acceptanceTypeName || '-'
          }}</el-descriptions-item>
        <el-descriptions-item label="验收意见">{{
          item.view || '-'
          }} </el-descriptions-item>
        <template v-for="(elemnt, i) in item.acceLevelPartInfoVos">
          <el-descriptions-item label="序号">
            {{ i
            + 1 || '-'
            }}
          </el-descriptions-item>
          <el-descriptions-item label="验收标准" :span="3">{{ elemnt.levelName || '-' }}
          </el-descriptions-item>
        </template>
      </el-descriptions>


    </div> -->
    <el-divider>验收信息</el-divider>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="(item, index) in form.results" :key="index"
        :title="`验收人:${item.accepterName}, 验收时间:${item.acceptanceTime || '-'}, 验收类型 :${item.acceptanceTypeName || '-'}`"
        :name="index">
        <el-descriptions direction="vertical" class="margin_topys" border :column="3" size="medium">
          <el-descriptions-item label="验收人">{{ item.accepterName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="验收时间">{{ item.acceptanceTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="验收类型">{{ item.acceptanceTypeName || '-' }}</el-descriptions-item>
          <template v-for="(value, keys) in item.acceLevelPartInfoVos">
            <el-descriptions-item label="序号">{{ keys + 1 || '-' }}</el-descriptions-item>
            <el-descriptions-item label="验收标准" :span="2">{{ value.levelName || '-' }}
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
    <!-- ---------------------------------------------------验收流程----------------------------------------------------------- -->
    <el-divider>验收流程</el-divider>
    <div class="accep_flex" align="center">
      <el-steps direction="vertical" finish-status="success">
        <el-step status="success" icon="el-icon-s-help" title="采购" :description="'采购时间：' + applicationTime" />
        <el-step icon="el-icon-s-help" v-for="(item, index) in stepList" :key="index"
          :status="item.status === '0' ? 'success' : 'wait'" :title="item.acceptanceTypeName || '-'">
          <span slot="description">
            验收时间：{{ item.acceptanceTime || '-' }}
            <br />
            验收意见：{{ item.view || '-' }}
          </span>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
import { listDetail } from '@/api/purchasing/equipment'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {},//基本信息
      stepList: [],// 验收流程
      applicationTime: '',//验收流程开始时间
      applicationFinish: '',//验收流程结束时间
      islength: false,
      activeName: null
    }
  },
  mounted () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data: res1 } = await listDetail(this.parentid);
      this.activeName = res1.results.length - 1
      this.form = res1
      this.stepList = res1.results
      this.applicationTime = res1.purchaseTime // 后续验收开始时间
      // -----------------------------------------后续验收处理逻辑-------------------------------------------------------------
      // const finishList = res1.results.filter(item => {
      //   return item.finalAcceptanceFlag == 1
      // })
      // if (finishList.length) {
      //   this.applicationFinish = finishList.slice(-1)[0] //后续验收结束时间
      //   // 判断（是否终验：0：是，1：否），再判断数组以下是否全部为 （0：已通过，1：不通过），是页面最终就打勾
      //   const finish = this.stepList.some(item => {
      //     if (item.finalAcceptanceFlag == 1) {
      //       return item.status == 0
      //     }
      //   }
      //   )
      //   this.islength = finish
      // }
    },
    // 附件数据重组
    handleSubstring (str) {
      if (str) {
        const index = str.lastIndexOf(".");
        str = str.substring(index + 1, str.length);
        return '.' + str
      }
    },
    randomRgb (index) {
      return {
        background: 'rgba(44, 62, 80,0.' + (index + 2) + ')',
        color: 'white',
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .dialog_left>div:nth-child(1){
//   flex:1
// }
/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.dialog_message {
  margin-top: 30px;
}

.dialog_check {
  display: flex;
}

.dialog_check {
  display: flex;
  width: 40%;
  margin: 0 auto;
  text-align: center;
  justify-content: space-between;
}

.el-steps--vertical {
  height: 64%;
}

.accep_title {
  padding: 20px;
  background-color: green;
  color: white;
  font-size: 18px;
  margin-left: 10px;

}

.accep_flex {
  height: calc(100vh - 520px);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>